<template>
	<div v-if="user">
		<div class="userromain">
			<div>
				<div class="TopRectangles dispaygrid userimg">
					<img src="./../assets/img/authorbg.png" alt="" class="stretchfully" />
					<div class="center userhomepageingbox">
						<el-avatar class="Roundheadportraitbig" :size="60" v-if="user" :src="user.Avatar">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>
						<el-avatar v-else class="Roundheadportraitbig" :size="60">
							<div class="image-slot iconfont icon-setting-role"></div>
						</el-avatar>
						<div class="iconfont icon-renzhengguanli authentications YellowLabelCertification"> </div>
					</div>
					<div class="uid">UID:{{ user.id }}</div>
				</div>
				<div class="Genericpadding ThinLineLayout minaxgap">
					<div v-if="user" class="center Horizontalspacing minaxgap"
						><span class="center blod">{{ user.username }}</span>
						<div class="userqathumbs-up">{{ user.name }}</div>
					</div>
					<div class="center minfont grey element">{{ user.signature }}</div>
					<div class="gridrowtwo minxgap">
						<div class="userbuttons">
							<span class="center Horizontalspacing minxgap"> <div class="iconfont icon-tianxie center"></div><span class="center">我要发布</span> </span>
						</div>
						<a class="userqathumbsup" href="plugin.php" target="_blank" rel="noopener noreferrer">
							<span class="center Horizontalspacing minxgap"> <div class="iconfont icon-WEByingyong centerend"></div><span class="center">应用中心</span> </span></a
						>
					</div>
				</div>
			</div>
			<ul class="usercomn">
				<!-- 灵活的话 生成的时候就要判断是否是焦点 settings-->
				<router-link class="Genericpadding turngreen" to="/user"><p class="center">我的账户</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/mycourse"><p class="center">我的课程</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/order"><p class="center">我的订单</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/MyCollection"><p class="center">我的收藏</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/forum"><p class="center">我的帖子</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/question"><p class="center">我的提问</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/settings"><p class="center">个人资料</p> </router-link>
				<router-link class="Genericpadding turngreen" to="/user/cat"><p class="center">客服中心</p> </router-link>
				<div class="Genericpadding turngreen" @click="exit"><p class="center">退出登陆</p> </div>
			</ul>
		</div>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	import { Logoutoflogin } from '@/api/api'
	export default {
		name: 'userleft',
		computed: {
			...mapState(['logon', 'user']),
		},
		components: {
			// 组件
		},
		data() {
			return {
				//返回值
			}
		},
		methods: {
			// 退出登陆
			exit() {
				Logoutoflogin()
			},
			// 函数
		},
		mounted() {
			// 生命周期:
		},
	}
</script>
<style>
	a.router-link-exact-active {
		color: #52e29f;
	}
</style>
<style scoped>
	.usercomn {
		display: flex;
		flex-direction: column;
	}
	.userromain {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.uid {
		position: absolute;
		color: #c8c9cc;

		top: 2px;
		left: 5px;
	}
	.element {
		width: 280px;
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 超出部分隐藏 */
		text-overflow: ellipsis; /* 显示省略号 */
	}
	@media screen and (max-width: 860px) {
		.usercomn {
			flex-direction: row;
			overflow-x: auto; /* 水平滚动 */
			white-space: nowrap; /* 让导航项水平排列 */
			display: inline-flex; /* 将导航项放在一行 */
			scrollbar-width: none; /* 隐藏滚动条 */
			scrollbar-track-color: transparent; /* 隐藏滚动条轨道 */
			scrollbar-face-color: transparent; /* 隐藏滚动条滑块 */
			-ms-overflow-style: none; /* 隐藏 IE 和 Edge 滚动条 */
		}
		.usercomn::-webkit-scrollbar {
			display: none; /* 隐藏滚动条 */
		}
		.userromain {
			display: flex;
			flex-direction: column;
			gap: 0.1rem;
		}
	}
</style>
